<template>
	<view class="container">
		<view class="search-container-view">
			<view class="search-view">
				<image src="../../static/home_nav_search.png" class="icon"></image>
				<input placeholder="打针|换药" />
				<view class="search-text">搜索</view>
			</view>
		</view>
		<view ref="bottomContentView" class="bottom-content-view">
			<zhSlidingMenu
				v-if="showMenu"
				:tabbar='list' 
				:scrollH="scrollH">
				<template v-slot:scrollArr="{scroll_list}">
					<view class="right-list">
						<view class="list-item" v-for="(item,index) in scroll_list" @click="navToDetails()">
							<image src="https://applet.youtuyiliao.com/profile/avatar/2022/12/29/home_banner.png" class="img" mode="aspectFill"></image>
							<view class="rigth-view">
								<view class="title">雾化吸入</view>
								<view class="content double-line-ellipsis">1.婴儿皮肤、脐部、臀部护理指导;2.哺乳和喂养指导;3.婴儿异常</view>
							</view>
						</view>
					</view>
				</template>
			</zhSlidingMenu>
		</view>



	</view>
</template>

<script>
	import zhSlidingMenu from '@/components/zh-slidingMenu/zhSlidingMenu/zhSlidingMenu.vue'
	export default {
		components: {
			zhSlidingMenu
		},
		data() {
			return {
				showMenu:false,
				scrollH: 0, //scroll高度
				list: [
					{
						name:'基础护理',
						list:[]
					},
					{
						name:'健康指导',
						list:[]
					},
					{
						name:'皮肤管理',
						list:[]
					},
					{
						name:'管理维护',
						list:[]
					},
					{
						name:'母婴护理',
						list:[]
					},
					{
						name:'糖尿病护理',
						list:[]
					},
					{
						name:'中医护理',
						list:[]
					},
					{
						name:'康复护理',
						list:[]
					},
					{
						name:'标本采集',
						list:[]
					}
				],
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.safeArea.height - 88
				}
			});
			// const ref = this.$refs.bottomContentView
			// this.scrollH = ref.$el.offsetHeight
			// const query = uni.createSelectorQuery()
			// query.select('.bottom-content-view').boundingClientRect(rect => {
			// 	const  height = rect.height;
			// 	this.scrollH = height
			// }).exec()
			this.init()
		},
		methods: {
			init(){
				this.list.forEach(e => {
					const list = []
					for (let i = 0; i < 5; i++) {
						list.push({})
					}
					e.list = list
				})
				this.showMenu = true
			},
			navToDetails(){
				uni.navigateTo({
					url:"/patientAppPages/pages/serviceDetails/serviceDetails"
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: calc(100vh - 44px);
		display: flex;
		flex-direction: column;
	}

	.search-container-view {
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;

		.search-view {
			width: 100%;
			height: 64rpx;
			background: white;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			input {
				height: 100%;
				flex: 1;
				font-size: 26rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}

			.search-text {
				font-size: 30rpx;
				color: #0BC5AE;
			}
		}
	}
	
	.right-list{
		width: 100%;
		display: flex;
		flex-direction: column;
		.list-item{
			width: 100%;
			height: 220rpx;
			display: flex;
			align-items: center;
			border-bottom: solid 1px #F8F8F8;
			.img{
				width: 136rpx;
				height: 136rpx;
			}
			.rigth-view{
				flex: 1;
				margin-left: 20rpx;
				.title{
					font-size: 32rpx;
					color: #232323;
					font-weight: bold;
				}
				.content{
					color: rgba(35,35,35,0.7);
					font-size: 26rpx;
				}
			}
		}
	}
	.bottom-content-view{
		flex: 1;
	}
</style>